<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试浏览器宽高</title>
		<style type="text/css">
			#a{
				width: 100%;
				/* height: 200px; */
			}
			#a div{
				float: left;
				height: 200px;
			}
			#a div:nth-child(1) {
				background-color: lightcoral;
			}
			#a div:nth-child(2) {
				background-color: aquamarine;
			}
			#a div:nth-child(3) {
				background-color: blueviolet;
			}
			@media screen and (min-device-width:700px){
				#a div{
					width: 33.3%;
				}
			}
			@media screen and (min-device-width:400px) and (max-device-width:699px) {
				#a div{
					width: 50%;
				}
			}
			@media screen and (max-device-width:399px) {
				#a div{
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>
